<template>
    <h1>循环指令</h1>
    <!--  item的值从1-5，循环5次，生成5个li  -->
    <ul>
        <li v-for="i in productArr">{{i}}</li>
    </ul>
    <table border="1">
        <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item, index) in productArr">
            <td>{{index+1}}</td>
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
            <td>{{item.num}}</td>
            <td><button @click="del(index)" >删除</button></td>
        </tr>
    </table>
    
</template>

<script setup>
import {ref} from "vue";

const productArr = ref([
    {title: "红旗", price: 50,num:100},
    {title: "劳斯莱斯", price: 60,num:101},
    {title: "迈巴赫", price: 70,num:102},
    {title: "兰博基尼", price: 80,num:103},
    {title: "法拉利", price: 90,num:104},
    {title: "迈凯伦", price: 100,num:105},
    {title: "布加迪", price: 110,num:106},
    {title: "保时捷", price: 120,num:107},
    {title: "霍希", price: 130,num:108},
]);
//定义删除的方法
    const del = (index) => {
        if (confirm("确定删除您的爱车吗？")){
            productArr.value.splice(index, 1);
        }
    }
</script>

<style scoped>

</style>